var module = {
    callList: {},
    msgList: {
        state: {
            queryParams: {
                imeiLike: null
            },
            content: [],
            totalPages: 1,
            number: 0
        },
        container: null,
        app: null,
        init: function () {
            var me = module.msgList;
            if (me.app != null) {
                me.reload(1); return;
            }
            me.container = $('#msgRecords');
            me.app = me.appInitFn();
        },
        reload: function (page) {
            var me = module.msgList;
            var params = {
                pageSize: 10,
                page: page || 1,
                imeiLike: me.state.queryParams.imeiLike
            };
            $.ajax({
                url: 'mnt/getMsgRecords',
                data: params,
                success: function (resp) {
                    if (resp.success) {
                        me.state.content = resp.data.content;
                        me.state.totalPages = resp.data.totalPages;
                        me.state.number = resp.data.number;
                    } else console.error(resp);
                }
            });
        },
        appInitFn: function () {
            var me = module.msgList;
            return new Vue({
                el: '#msgRecords',
                data: me.state,
                created: me.reload,
                methods: {
                    reload: function () {
                        me.reload();
                    },
                    pgUp: function () {
                        if (me.state.number == 0) return;
                        me.reload(me.state.number);
                    },
                    pgDown: function () {
                        if (me.state.number == me.state.totalPages - 1) return;
                        me.reload(me.state.number + 2);
                    }
                }
            })
        }
    },
    audioList: {
        state: {
            queryParams: {
                imeiLike: null
            },
            content: [],
            totalPages: 1,
            number: 0
        },
        container: null,
        app: null,
        init: function () {
            var me = module.audioList;
            if (me.app != null) {
                me.reload(1); return;
            }
            me.container = $('#audioRecords');
            me.app = me.appInitFn();
        },
        reload: function (page) {
            var me = module.audioList;
            var params = {
                pageSize: 10,
                page: page || 1,
                imeiLike: me.state.queryParams.imeiLike
            };
            $.ajax({
                url: 'mnt/getAudioRecords',
                data: params,
                success: function (resp) {
                    if (resp.success) {
                        me.state.content = resp.data.content;
                        me.state.totalPages = resp.data.totalPages;
                        me.state.number = resp.data.number;
                    } else console.error(resp);
                }
            });
        },
        appInitFn: function () {
            var me = module.audioList;
            return new Vue({
                el: '#audioRecords',
                data: me.state,
                created: me.reload,
                methods: {
                    reload: function () {
                        me.reload();
                    },
                    pgUp: function () {
                        if (me.state.number == 0) return;
                        me.reload(me.state.number);
                    },
                    pgDown: function () {
                        if (me.state.number == me.state.totalPages - 1) return;
                        me.reload(me.state.number + 2);
                    },
                    showPlayerWin: function (e) {
                        var $target = $(e.target);
                        // $target.data('url')
                        // var url = 'http://47.94.198.203/downloadFile/229afc43-fd70-4df0-b11a-f9682714e7f6.mp3'
                        $('#videoPlayerWin .modal-body .content').html(
                            '<video controls="controls" src="' + $target.data('url') + '" type="audio/mp3"></video>'
                        )
                    }
                }
            })
        }
    },
    mobileList: {
        state: {
            queryParams: {
                imeiLike: null
            },
            content: [],
            totalPages: 1,
            number: 0
        },
        container: null,
        app: null,
        init: function () {
            var me = module.mobileList;
            if (me.app != null) {
                me.reload(1); return;
            }
            me.container = $('#mobileRecords');
            me.app = me.appInitFn();
        },
        reload: function (page) {
            var me = module.mobileList;
            var params = {
                pageSize: 10,
                page: page || 1,
                imeiLike: me.state.queryParams.imeiLike
            };
            $.ajax({
                url: 'mnt/getMobileRecords',
                data: params,
                success: function (resp) {
                    if (resp.success) {
                        me.state.content = resp.data.content;
                        me.state.totalPages = resp.data.totalPages;
                        me.state.number = resp.data.number;
                    } else console.error(resp);
                }
            });
        },
        appInitFn: function () {
            var me = module.mobileList;
            return new Vue({
                el: '#mobileRecords',
                data: me.state,
                created: me.reload,
                methods: {
                    reload: function () {
                        me.reload();
                    },
                    pgUp: function () {
                        if (me.state.number == 0) return;
                        me.reload(me.state.number);
                    },
                    pgDown: function () {
                        if (me.state.number == me.state.totalPages - 1) return;
                        me.reload(me.state.number + 2);
                    },
                    enableApp: function (e) {
                        var $target = $(e.target);
                        $.ajax({
                            type: 'post',
                            url: 'mnt/enableApp',
                            data: {imei: $target.data('imei'), enable: $target.hasClass('btn-danger') ? false : true},
                            success: function (resp) {
                                if (resp.success) me.reload(me.state.number + 1);
                                else console.error(resp)
                            }
                        })
                    }
                }
            })
        }
    }
};

$(function() {
    validator();

    //定义一个校验器
    const bootstrapValidator = $("#addUserForm").data('bootstrapValidator');
    //执行校验
    $(".js-saveUser").click(function () {
        bootstrapValidator.validate();
        //判断校验结果
        if (bootstrapValidator.isValid()){
            addUser();
            //reload
        }
    });


    $(".meun-item").click(function() {
        $(".meun-item").removeClass("meun-item-active");
        $(this).addClass("meun-item-active");
        var itmeObj = $(".meun-item").find("img");
        itmeObj.each(function() {
            var items = $(this).attr("src");
            items = items.replace("_grey.png", ".png");
            items = items.replace(".png", "_grey.png")
            $(this).attr("src", items);
        });
        var attrObj = $(this).find("img").attr("src");

        attrObj = attrObj.replace("_grey.png", ".png");
        $(this).find("img").attr("src", attrObj);
    });
    $("#topAD").click(function() {
        $("#topA").toggleClass(" glyphicon-triangle-right");
        $("#topA").toggleClass(" glyphicon-triangle-bottom");
    });
    $("#topBD").click(function() {
        $("#topB").toggleClass(" glyphicon-triangle-right");
        $("#topB").toggleClass(" glyphicon-triangle-bottom");
    });
    $("#topCD").click(function() {
        $("#topC").toggleClass(" glyphicon-triangle-right");
        $("#topC").toggleClass(" glyphicon-triangle-bottom");
    });
    $(".toggle-btn").click(function() {
        $("#leftMeun").toggleClass("show");
        $("#rightContent").toggleClass("pd0px");
    });
    $(".js-addUser").click(function () {
        event.preventDefault();
        $("#addUserForm")[0].reset();
        //清除bootstrapValidator 验证，再重置
        $("#addUserForm").data("bootstrapValidator").destroy();
        $("#addUserForm").data("bootstrapValidator", null);
        validator();
        $(".js-addUserError").html("");
    });
    $("input").focus(function(event){
        event.preventDefault();
        $(".js-addUserError").html("");
    })
})

function  addUser() {
    var data = $('#addUserForm').serializeArray();
    var arry={};
    $.each(data, function () {
        arry[this.name] = this.value;
    });
    var submitData = JSON.stringify(arry);
    $.ajax({
        url:'mnt/addUser',
        data: submitData,
        type: "POST",
        contentType: "application/json;charset=UTF-8",
        cache:false,
        success:function(resp){
            if (resp.success) {
                $("#addUser").modal("hide");
            } else {
                $(".js-addUserError").html(resp.errorMsg);
            }
        }
    })
}

function validator(){
    $("#addUserForm").bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            //普通字段不为空校验
            userName: {
                validators: {
                    notEmpty: {
                        message: '请输入姓名'
                    },
                }
            },
            mobileNumber: {
                validators: {
                    notEmpty: {
                        message: '请输入手机号码'
                    },
                    regexp: {
                        regexp: /^1[0-9]{10}$/,
                        message: "请输入正确手机号"
                    }
                }
            },
            roomNumber: {
                validators: {
                    notEmpty: {
                        message: '请输入房间号'
                    }
                }
            }

        },
    });
}

